import React from 'react'
import $ from 'jquery';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css'
import {connect} from 'react-redux'
import * as actions from '../request/action'
import mark from '../../../../../assets/location.png'
import {Button, Modal,Drawer} from 'antd'
import Cameradetails from '../IconList/IconTable'
import Alarmdetails from '../Circle/CircleList'
import styles from './styles.less'
import {FullscreenOutlined,FullscreenExitOutlined} from '@ant-design/icons'
import {withRouter} from 'react-router-dom'
import waringmark from '../../../../../assets/location-2.png'
var mapenlarge=true //地图
class Index extends React.Component{
    constructor(props){
        super(props)
        this.state={
            visible: false,
            // 默认中⼼心点 
            defaultCenter: {
              lag: 34.27,
              lng: 108.95
            },
            keyNum: 0,
            visible1:false,    //相机详情
            visible2:false,  //告警详情是否展示
            information:{}, //告警详情
            title:'' ,//弹框title
            id:'',   //点击弹窗的摄像机id
            // mapenlarge: true, //地图
            

        }
        this.map = null; 
        this.glayer_normal = null; 
        this.glayer_satelite = null;
        this.count =1
        
    }
    componentDidMount(){
    //      let Map2 = L.Map.extend({                                      //为了同时显示多个弹窗，修改了构造方法，显示弹窗可能会导致地图偏移，设置中心点失效
    //         // 覆盖源码
    //         openPopup: function (popup, latlng, options) {
    //             if (!(popup instanceof L.Popup)) {
    //                 popup = new L.Popup(options).setContent(popup);
    //             }
    //             if (latlng) {
    //                 popup.setLatLng(latlng);
    //             }
    //             if (this.hasLayer(popup)) {
    //                 return this;
    //             }
    //             if (this._popup && this._popup.options.autoClose) {
    // //                this.closePopup(); 修改了这块
    //             }
    //             this._popup = popup;
    //             return this.addLayer(popup);
    //         }
    //     });
     
        var url_normal = '/api/server/rest/web/map/788865972/{z}/{x}/{y}';
        this.glayer_normal = new L.TileLayer(url_normal, { minZoom: 6, maxZoom: 12 });
        $(window).height(function () {
            $("#mainmap").css("width", "100%");
        });
        $("#mainmap").empty();
        this.map = new L.Map('mainmap',
          { layers: [this.glayer_normal] });
        // this.init();
        // this.props.getAllCamera()
        const {defaultCenter} =this.state
        this.map.setView(L.latLng(defaultCenter.lag, defaultCenter.lng),10) 
        this.map._onResize();
      
    }
    componentDidUpdate(){
        
        this.map.off("contextmenu")
        this.init();
    }
    Cameradetails=(item,index)=>{         //摄像机详情
        let information ={
            id:item.id,
            pageIndex:0,
            pageSize:10

        }
        this.props.getVidiconWarning(information)
        this.setState({
            visible2: true,
            information:item,
            xcoordinate:item.latitude,
            ycoordinate:item.longitude,
            id:this.props.cameraList[index].id
        })

    }
    init=()=>{
        let normalIcon = L.icon({
            iconUrl: mark,
            iconSize: [45 , 45]
        })
        let waringIcon =L.icon({
            iconUrl: waringmark,
            iconSize: [45 , 45]
        })
 
        let array1 = [] //标记数组
        let array2 = [] //圈圈数组
        let array3 = [] //路径
        if(this.count==1){
        if(this.props.cameraList.length==0){                        //无摄像机定位西安
            const {defaultCenter} =this.state
            this.map.setView(L.latLng(defaultCenter.lag, defaultCenter.lng),12) 
        }
        if(this.props.cameraList.length==1){
            this.map.setView(L.latLng(this.props.cameraList[0].latitude,this.props.cameraList[0].longitude),12)
        }
        if(this.props.cameraList.length>1){
            let ss = []
            this.props.cameraList.map((item,index)=>{
                ss.push([item.latitude,item.longitude])
            })
            console.log(ss)
            this.map.fitBounds(ss)
        }
    }
        this.count++
        if(this.props.cameraList.length!=0){
        this.props.cameraList.map((item,index)=>{
            let size
            size=[(item.name.length-1)*15+50,30]
            let Icon = L.divIcon({
                html: `${item.name}`,
                className: styles.Icon,
                iconSize: size
              })
            array1[index]=L.marker([item.latitude,item.longitude],{icon:Icon}).addTo(this.map)
            if(item.total!=0){
                 array1[index]=L.marker([item.latitude,item.longitude],{icon:waringIcon}).addTo(this.map)
            

            }
            else{
                array1[index]=L.marker([item.latitude,item.longitude],{icon:normalIcon}).addTo(this.map)
            }
            array3.push([item.latitude,item.longitude])
             array1[index].on("click",()=>{this.Cameradetails(item,index)})
        })
        L.polyline(array3,{color:'blue',weight:6}).addTo(this.map)

    }}
    change=()=>{
        console.log(';kk')
        this.props.change()
        this.map._onResize();
        
    }
    render(){
        console.log("=>>>>>>>>",  this.props.status)
        // let ss = []
        // if(this.props.cameraList.length!=0){
        // this.props.cameraList.map((item,index)=>{
        //     ss.push([item.latitude,item.longitude])
        // })
        // console.log(ss)}
        // console.log(this.props.cameraList)
        return(
            <div className={styles.totall} style={{width:'100%',height:'99%',position:'relative'}} >
            <div id='mainmap' style={{width:'100%',height:'100%'}} className={styles.map}/>
            {/* <div className={styles.center} style={{width:'30px'}}>
                <Button onClick={()=>{this.change()}} >
                    {
                        this.props.status== true?<FullscreenExitOutlined />:<FullscreenOutlined />
                    }
                </Button>
            </div> */}
            <Modal
                   
                    visible={this.state.visible2}
                    getContainer={false}
                    footer={null}
                    destroyOnClose
                    onCancel={()=> {this.setState({visible2:false}) ;}}

            >
                    <Alarmdetails information={this.props.Alarmdetails} id={this.state.id} alarmdetails={this.state.information}/>

            </Modal>
            </div>
        )
    }
}
const mapStateToProps=(state)=>({
    cameraList:state.todayWarningConfig.cameraList,
    Alarmdetails:state.Mapcamera.Alarmdetails
})
const mapDispatchToProps=(dispatch)=>({
    getAllCamera() {
        dispatch(actions.getAllCamera())
    },
    getVidiconWarning(information) {
        dispatch(actions.getVidiconWarning(information))
    }
})
export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Index))